<template>
  <div class="overview-style">
    <div class="top-select-group">
      <el-date-picker
        v-model="value1"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      ></el-date-picker>
      <el-select v-model="serviceGroupValue" clearable placeholder="全部客服组">
        <el-option
          v-for="item in serviceGroupOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-select v-model="serviceValue" clearable placeholder="全部客服">
        <el-option
          v-for="item in serviceOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-button style="float:right;">导出当前数据</el-button>
    </div>
    <div class="middle-data-group">
      <statistic-item
        v-for="item in itemData"
        :key="item.name"
        :text="item.text"
        :num="item.num"
        :label="item.label"
      ></statistic-item>
    </div>
    <div class="session-num-group">
      <!-- <div class="item-title-style">会话数</div> -->
      <div class="echarts-container">
        <div ref="sessionEcharts" style="height: 320px;width: 1150px"></div>
      </div>
    </div>
    <div class="bottom-data-group">
      <div class="bottom-data-item">
        <div ref="customerEcharts" style="height: 320px;width: 500px;"></div>
      </div>
      <div class="bottom-data-item">
        <div ref="commentEcharts" style="height: 320px;width: 500px"></div>
      </div>
    </div>
    <div class="bottom-map-group">
      <div ref="mapEcharts" style="height: 800px;width: 1150px"></div>
    </div>
  </div>
</template>

<script>
import StatisticItem from "@/components/items/StatisticItem";
import "../../../node_modules/echarts/map/js/china.js"; // 引入中国地图数据
export default {
  name: "StatisticOverview",
  components: {
    StatisticItem
  },
  props: {},
  data() {
    return {
      itemData: [
        {
          name: "item1",
          text: "总会话量",
          num: 230,
          label: "有效会话数200"
        },
        {
          name: "item1",
          text: "总客户量",
          num: 30,
          label: "有效客户20"
        },
        {
          name: "item1",
          text: "总访问量",
          num: 208,
          label: "有效会话数50%"
        },
        {
          name: "item1",
          text: "平均会话时长",
          num: "9m3s",
          label: "平均响应30s"
        },
        {
          name: "item1",
          text: "好评率",
          num: "78%",
          label: "评价率67%"
        },
        {
          name: "item1",
          text: "一次性解决问题率",
          num: "60%",
          label: "解决率65%"
        },
        {
          name: "item1",
          text: "总会话消息数",
          num: 2900,
          label: "有效会话数200"
        },
        {
          name: "item1",
          text: "总人工消息数",
          num: 2600,
          label: "总客服消息数2389"
        },
        {
          name: "item1",
          text: "平均每会话消息数",
          num: 28,
          label: "平均每会话有效消息数15"
        }
      ],
      serviceGroupOptions: [
        {
          value: "选项1",
          label: "客服组一"
        },
        {
          value: "选项2",
          label: "客服组二"
        },
        {
          value: "选项3",
          label: "客服组三"
        }
      ],
      serviceGroupValue: "",
      serviceOptions: [
        {
          value: "选项1",
          label: "王美美"
        },
        {
          value: "选项2",
          label: "七尾"
        },
        {
          value: "选项3",
          label: "李想"
        },
        {
          value: "选项4",
          label: "王志"
        }
      ],
      serviceValue: "",
      mapData: [
        { name: "北京", value: "100" },
        { name: "天津", value: "100" },
        { name: "上海", value: "100" },
        { name: "重庆", value: "100" },
        { name: "河北", value: "100" },
        { name: "河南", value: "100" },
        { name: "云南", value: "100" },
        { name: "辽宁", value: "100" },
        { name: "黑龙江", value: "100" },
        { name: "湖南", value: "100" },
        { name: "安徽", value: "100" },
        { name: "山东", value: "100" },
        { name: "新疆", value: "100" },
        { name: "江苏", value: "100" },
        { name: "浙江", value: "100" },
        { name: "江西", value: "100" },
        { name: "湖北", value: "100" },
        { name: "广西", value: "100" },
        { name: "甘肃", value: "100" },
        { name: "山西", value: "100" },
        { name: "内蒙古", value: "100" },
        { name: "陕西", value: "100" },
        { name: "吉林", value: "100" },
        { name: "福建", value: "100" },
        { name: "贵州", value: "100" },
        { name: "广东", value: "100" },
        { name: "青海", value: "100" },
        { name: "西藏", value: "100" },
        { name: "四川", value: "100" },
        { name: "宁夏", value: "100" },
        { name: "海南", value: "100" },
        { name: "台湾", value: "100" },
        { name: "香港", value: "100" },
        { name: "澳门", value: "100" }
      ]
    };
  },
  watch: {},
  computed: {},
  methods: {
    drawSessionEcharts() {
      // 注意不能在created中调用该函数，建议在mounted中调用该函数
      let sessionChart = this.$echarts.init(this.$refs.sessionEcharts);
      sessionChart.setOption({
        color: ["#3bd77f", "#ff7474", "#ff9945"],
        title: {
          text: "访问量统计"
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["总访问量", "总会话量", "有效会话量"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "10%",
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "00:00",
            "01:00",
            "02:00",
            "03:00",
            "04:00",
            "05:00",
            "06:00",
            "07:00",
            "08:00",
            "09:00",
            "10:00",
            "11:00",
            "12:00",
            "13:00",
            "14:00",
            "15:00",
            "16:00",
            "17:00",
            "18:00",
            "19:00",
            "20:00",
            "21:00",
            "22:00",
            "23:00"
          ]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "总访问量",
            type: "line",
            stack: "总量",
            data: [
              120,
              132,
              101,
              134,
              90,
              230,
              120,
              132,
              101,
              134,
              90,
              230,
              120,
              132,
              101,
              134,
              90,
              230,
              120,
              132,
              101,
              134,
              90,
              230
            ]
          },
          {
            name: "总会话量",
            type: "line",
            stack: "总量",
            data: [
              220,
              182,
              191,
              234,
              290,
              330,
              220,
              182,
              191,
              234,
              290,
              330,
              220,
              182,
              191,
              234,
              290,
              330,
              220,
              182,
              191,
              234,
              290,
              330
            ]
          },
          {
            name: "有效会话量",
            type: "line",
            stack: "总量",
            data: [
              150,
              232,
              201,
              154,
              190,
              330,
              150,
              232,
              201,
              154,
              190,
              330,
              150,
              232,
              201,
              154,
              190,
              330,
              150,
              232,
              201,
              154,
              190,
              330
            ]
          }
        ],
        dataZoom: [
          {
            type: "slider", //图表下方的伸缩条
            show: true, //是否显示
            realtime: true, //拖动时，是否实时更新系列的视图
            bottom: "0"
          }
        ]
      });
    },
    drawCustomerEcharts() {
      // 注意不能在created中调用该函数，建议在mounted中调用该函数
      let customerChart = this.$echarts.init(this.$refs.customerEcharts);
      let map = {};
      customerChart.setOption({
        color: ["#1a7dfe", "#ff9138", "#9999ff", "#2ed477", "#ff6262"],
        title: {
          text: "客户来源占比"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          right: 50,
          top: 100,
          data: ["网页", "APP", "小程序", "公众号", "头条号"],
          formatter(name) {
            return name + "    " + map[name] + "%";
          }
        },
        series: [
          {
            name: "客户来源占比",
            type: "pie",
            radius: [70, "70%"],
            center: ["35%", "55%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
              formatter(component) {
                map[component.name] = component.percent;
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "30",
                fontWeight: "bold"
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 335, name: "网页" },
              { value: 310, name: "APP" },
              { value: 234, name: "小程序" },
              { value: 135, name: "公众号" },
              { value: 1548, name: "头条号" }
            ]
          }
        ]
      });
    },
    drawCommentEcharts() {
      // 注意不能在created中调用该函数，建议在mounted中调用该函数
      let commentEchart = this.$echarts.init(this.$refs.commentEcharts);
      let map = {};
      commentEchart.setOption({
        color: ["#1a7dfe", "#2ed477", "#ff6262"],
        title: {
          text: "评价占比"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          right: 50,
          top: 100,
          data: ["好评", "中评", "差评"],
          formatter(name) {
            return name + "    " + map[name] + "%";
          }
        },
        series: [
          {
            name: "评价占比",
            type: "pie",
            radius: [70, "70%"],
            center: ["35%", "55%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
              formatter(component) {
                map[component.name] = component.percent;
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "30",
                fontWeight: "bold"
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 335, name: "好评" },
              { value: 310, name: "中评" },
              { value: 234, name: "差评" }
            ]
          }
        ]
      });
    },
    drawMapEcharts() {
      let mapEchart = this.$echarts.init(this.$refs.mapEcharts);
      mapEchart.setOption({
        title: {
          text: "区域分布",
          subtext: "",
          x: "left"
        },
        tooltip: {
          trigger: "item"
        },
        visualMap: {
          show: true,
          x: "left",
          y: "center",
          splitList: [
            { start: 500, end: 600 },
            { start: 400, end: 500 },
            { start: 300, end: 400 },
            { start: 200, end: 300 },
            { start: 100, end: 200 },
            { start: 0, end: 100 }
          ],
          color: [
            "#5475f5",
            "#9feaa5",
            "#85daef",
            "#74e2ca",
            "#e6ac53",
            "#9fb5ea"
          ]
        },
        series: [
          {
            name: "数据",
            type: "map",
            mapType: "china",
            roam: true,
            label: {
              normal: {
                show: true //省份名称
              },
              emphasis: {
                show: false
              }
            },
            data: this.mapData //数据
          }
        ]
      });
    },
    drawMap2Echarts() {
      let mapEchart = this.$echarts.init(this.$refs.mapEcharts);
      mapEchart.setOption({
        title: {
          text: "iphone销量",
          subtext: "纯属虚构",
          left: "center"
        },
        tooltip: {
          trigger: "item"
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: ["iphone"]
        },
        visualMap: {
          min: 0,
          max: 2500,
          left: "left",
          top: "bottom",
          text: ["高", "低"], // 文本，默认为数值文本
          calculable: true
        },
        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center",
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: "iphone",
            type: "map",
            mapType: "china",
            roam: false,
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: true
              }
            },
            data: [
              { name: "北京", value: Math.round(Math.random() * 1000) },
              { name: "天津", value: Math.round(Math.random() * 1000) },
              { name: "上海", value: Math.round(Math.random() * 1000) },
              { name: "重庆", value: Math.round(Math.random() * 1000) },
              { name: "河北", value: Math.round(Math.random() * 1000) },
              { name: "河南", value: Math.round(Math.random() * 1000) },
              { name: "云南", value: Math.round(Math.random() * 1000) },
              { name: "辽宁", value: Math.round(Math.random() * 1000) },
              { name: "黑龙江", value: Math.round(Math.random() * 1000) },
              { name: "湖南", value: Math.round(Math.random() * 1000) },
              { name: "安徽", value: Math.round(Math.random() * 1000) },
              { name: "山东", value: Math.round(Math.random() * 1000) },
              { name: "新疆", value: Math.round(Math.random() * 1000) },
              { name: "江苏", value: Math.round(Math.random() * 1000) },
              { name: "浙江", value: Math.round(Math.random() * 1000) },
              { name: "江西", value: Math.round(Math.random() * 1000) },
              { name: "湖北", value: Math.round(Math.random() * 1000) },
              { name: "广西", value: Math.round(Math.random() * 1000) },
              { name: "甘肃", value: Math.round(Math.random() * 1000) },
              { name: "山西", value: Math.round(Math.random() * 1000) },
              { name: "内蒙古", value: Math.round(Math.random() * 1000) },
              { name: "陕西", value: Math.round(Math.random() * 1000) },
              { name: "吉林", value: Math.round(Math.random() * 1000) },
              { name: "福建", value: Math.round(Math.random() * 1000) },
              { name: "贵州", value: Math.round(Math.random() * 1000) },
              { name: "广东", value: Math.round(Math.random() * 1000) },
              { name: "青海", value: Math.round(Math.random() * 1000) },
              { name: "西藏", value: Math.round(Math.random() * 1000) },
              { name: "四川", value: Math.round(Math.random() * 1000) },
              { name: "宁夏", value: Math.round(Math.random() * 1000) },
              { name: "海南", value: Math.round(Math.random() * 1000) },
              { name: "台湾", value: Math.round(Math.random() * 1000) },
              { name: "香港", value: Math.round(Math.random() * 1000) },
              { name: "澳门", value: Math.round(Math.random() * 1000) }
            ]
          }
        ]
      });
    }
  },
  created() {},
  mounted() {
    this.drawSessionEcharts();
    this.drawCustomerEcharts();
    this.drawCommentEcharts();
    this.drawMapEcharts();
  }
};
</script>

<style scoped>
.overview-style {
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;
}
.middle-data-group {
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-evenly; */
  align-items: center;
  width: 100%;
  margin-top: 10px;
}
.item-title-style {
  padding: 20px;
  font-size: 20px;
  font-weight: bold;
}
.bottom-data-group {
  display: flex;
  align-items: center;
  padding: 20px;
  /* justify-content: space-evenly; */
}
.echarts-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.bottom-data-item {
  display: flex;
  justify-content: center;
  align-items: center;
}
.bottom-map-group {
  padding: 20px;
}
.session-num-group {
  padding: 20px 0;
}
</style>